<template>
  <m-container padding="0 25rpx" class="main">
    <view class="btn">
      <m-button width="172rpx" height="68rpx" shape="round" background="rgba(0,0,0,0.24)" @click="handleClickOut">
        <view class="btn_row">
          <image src="@/static/login-out.png" mode="scaleToFill" />
          退出
        </view>
      </m-button>
    </view>

    <view class="header">
      <image src="@/static/logo.png"></image>
      <text class="title">WMS工作台</text>
      <text class="sub">欢迎您开启新一天的工作！</text>
    </view>
    <view class="grid-container">
      <main-item
        bg="linear-gradient(-90deg, #A3CAFF, #2E7EEE)"
        title="快速入库单"
        :router-object="{ name: 'InWork' }"
        class="item1"
      />
      <main-item
        bg="linear-gradient(-90deg, #A3CAFF, #2E7EEE)"
        title="系统入库单"
        :router-object="{ name: 'InWorkList' }"
        class="item2"
      />

      <main-item bg="linear-gradient(-90deg, #C0CBFF, #6C84FC)" :router-object="{ name: 'OutWork' }" class="item3">
        <text class="title">出库单</text>
        <view class="sub_title">选择工单，开始出库操作</view>
        <view class="df aic jcsb" style="width: 100%; top: 26rpx; position: relative">
          <image src="@/static/chuku_arrow.png" mode="scaleToFill" class="icon" />
          <image src="@/static/chuku.png" mode="scaleToFill" class="arrow" />
        </view>
      </main-item>
    </view>

    <main-item
      icon="huiku"
      arrow="huiku_arrow"
      bg="linear-gradient(90deg, #C9E7F3, #FFFFFF)"
      title="回库"
      sub="可对剩余SKU移除/新增/回库等操作"
      :router-object="{ name: 'ReturnHouse' }"
    />

    <main-item
      icon="pandian"
      arrow="pandian_arrow"
      bg="linear-gradient(90deg, #D8E7F7, #FFFFFF)"
      title="库存盘点"
      sub="定期对仓库库位商品货物进行盘点"
      :router-object="{ name: 'Inventory' }"
    />

    <!-- <main-item
      icon="jiancezhan"
      arrow="jiancezhan_arrow"
      bg="linear-gradient(90deg, #D2DAF6, #FFFFFF)"
      title="检测站"
      sub="对不合规SKU进行操作处理"
      :router-object="{ name: 'InventoryInfo' }"
    /> -->
  </m-container>
</template>

<script>
import { showModal } from '@/hooks'
import { router } from '@/router'

export default {
  data() {
    return {}
  },
  onShow() {
    // uni.showTabBar()
  },
  methods: {
    handleClickOut() {
      showModal({
        title: '温馨提示',
        content: '是否确认退出登录！',
        showCancelButton: true,
        slot: true,
        confirm: async () => {
          await this.$store.dispatch('login/logout')
          router.replaceAll({
            name: 'UserLogin',
          })
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  .btn {
    margin-top: 32rpx;
    //#ifdef APP-PLUS
    margin-top: 62rpx;
    //#endif
    display: flex;
    justify-content: flex-end;
    &_row {
      font-size: 32rpx;
      display: flex;
      align-items: center;
      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 12rpx;
      }
    }
  }

  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60rpx;

    image {
      width: 150rpx;
      height: 150rpx;
      margin-left: auto;
      margin-right: auto;
    }

    .title {
      font-size: 40rpx;
      font-weight: bold;
      margin-top: 32rpx;
      text-align: center;
      display: flex;
    }

    .sub {
      color: #748faa;
      font-size: 28rpx;
      margin-top: 22rpx;
    }
  }
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列，比例为1:1 */
    grid-template-rows: auto auto; /* 两行 */
    gap: 24rpx; /* 设置网格间隔 */
    grid-template-areas:
      'item1 item3'
      'item2 item3';

    .item {
      margin: 0;
      color: #fff;
    }
  }

  .item1 {
    grid-area: item1;
  }

  .item2 {
    grid-area: item2;
  }

  .item3 {
    grid-area: item3;
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: baseline;

    .title {
      font-size: 34rpx;
      font-weight: bold;
    }
    .sub_title {
      font-size: 24rpx;
      margin-top: -10rpx;
    }
    .icon {
      width: 44rpx;
      height: 44rpx;
    }
    .arrow {
      width: 104rpx;
      height: 127rpx;
    }
  }
}

::v-deep {
  .container__box {
    background: #fff url('@/static/main-bg.png') no-repeat !important;
    background-size: 100% 100% !important;
  }
}
</style>
